<template>
  <div class="tg">
    <router-link to="/hongbei">
      <div>
        <img src="https://image.hongbeibang.com/FoTuxKG5pqYKuAsT8BjrflkAxEpj?48X48&imageView2/1/w/48/h/48" alt="" />
        <p>烘焙详情</p>
      </div>
    </router-link>
    <div class="video" v-if="data.step">
      <video controls="controls" :src="data.step[0].videoUrl"></video>
    </div>
    <div class="text" v-if="data.introduces">
      <h3>{{ data.title }}</h3>
      <div class="to" v-html="introduce"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {}
    }
  },
  computed: {
    // 替换img样式
    introduce() {
      return this.data.introduces[0].introduce.replace(/<img/g, '<img style="width:100%;"')
    }
  },
  mounted() {
    this.getData()
    this.cure()
  },
  methods: {
    // 接收hongbei传过来的参数
    cure() {
      this.$route.query.courid
    },
    getData() {
      this.axios.get(`/education/getStartClassByNewbie?_t=1666093796304&educationCourseId=${this.$route.query.courid}&timestamp=1666093796304`).then(res => {
        this.data = res.data.data
      })
    }
  }
}
</script>

<style scoped>
.tg > a > div:first-child > img {
  width: 8vw;
  margin: 2vh 3vw;
}
.tg > a > div:first-child {
  display: flex;
}
.tg > a > div:first-child > p {
  margin-top: 3vh;
  margin-left: 27vw;
  color: black;
  font-size: 5vw;
}
.video {
  width: 100vw;
}
.video > video {
  width: 100%;
}
.text {
  width: 90vw;
  margin: 0 auto;
}
.text > h3 {
  margin: 2vh 0;
  color: black;
}
.text .to p > a > span > img {
  width: 100%;
  z-index: 100000;
}
</style>
